{% macro scriptLine(idDivChart,idDivTable, dataGraphSeries, xAxisGraphData) %}

<script type="text/javascript">
	$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: '{{ idDivChart }}',
                type: 'spline'
            },
            title: {
                text: 'Wind in St Aubin...'
            },
            subtitle: {
                text: 'Spot de kite par excellence ?'
            },
            xAxis: {
            	 plotBands: [
            	{% for dateGraph in xAxisGraphData %}
            	{
                	color: '{% if loop.index is divisibleby(2) %}white{% else %}rgba(0, 0, 0, 0.05){% endif %}',
                	from: Date.UTC({{ dateGraph['from']['year'] }}, {{ dateGraph['from']['month'] }}, {{ dateGraph['from']['day'] }}),
                	to: Date.UTC({{ dateGraph['to']['year'] }}, {{ dateGraph['to']['month'] }}, {{ dateGraph['to']['day'] }}),
                },
                {
                	color: 'rgba(60, 170, 210, 0.2)',
                	from: Date.UTC({{ dateGraph['from']['year'] }}, {{ dateGraph['from']['month'] }}, {{ dateGraph['from']['day'] }}, 9),
                	to: Date.UTC({{ dateGraph['from']['year'] }}, {{ dateGraph['from']['month'] }}, {{ dateGraph['from']['day'] }}, 19),
                },
            	{% endfor %}
            	],
        	
                type: 'datetime',
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    day: '%a'
                }
            },
            yAxis: {
                title: {
                    text: 'Wind speed (nd)'
                },
                min: 0,

                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                plotBands: [{ // Light air
                    from: 0,
                    to: 12,
                    color: 'rgba(68, 170, 213, 0.1)',
                    label: {
                        text: 'Light air',
                        style: {
                            color: '#606060'
                        }
                    }
                }, { // kite planning
                    from: 12,
                    to: 22,
                    color: 'rgba(0, 0, 0, 0)',
                    label: {
                        text: 'kite planning',
                        style: {
                            color: '#606060'
                        }
                    }
                }, { // windsurf planning
                    from: 22,
                    to: 40,
                    color: 'rgba(68, 170, 213, 0.1)',
                    label: {
                        text: 'windsurf planning',
                        style: {
                            color: '#606060'
                        }
                    }
                }]
            },
			            
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y  +' noeuds';
                }
            },

            series: [
            {% for dataGraph in dataGraphSeries %}
            	{            
                name: '{{ dataGraph["dataGraph"]['serieName']}}',              
                data: [
				{% for rowData in dataGraph["dataGraph"]['highchartsData'] %}
					[Date.UTC({{ rowData['date'] }}), {{ rowData['wind'] }} ],   
				{% endfor %}                    
                ]},
            {% endfor %}
            ]
        });
    });
    
});
</script>
	
	
{% endmacro %}	 